<template>
    <div>
        <p>我是home-子组件 -{{ tit }}--{{ num }}</p>
        <button @click="emitFn">子传父</button>
    </div>
</template>

<script setup lang="ts">
// 之前的写法:
// const props = defineProps(['tit'])

// const props = defineProps({
//     tit: {
//         type: String,
//         default: '我是默认值'
//     }
// })
// console.log('props', props);


// ts中建议props的写法
// interface prop {
//     tit: string,
//     num?: number
// }
// type prop1 = {
//     tit: string,
//     num?: number
// }
// const props = defineProps<prop1>()
// console.log('props', props);


// ts中设置props 的默认值
// 语法: 参数1 为数据类型约束, 参数2 为定义的默认值对象
const props = withDefaults(defineProps<{
    tit: string,
    num?: number, // 可选属性
    fn: (m: string) => void
}>(), { tit: '我是默认值', num: 99999 });

console.log('props', props);
props.fn('卖碳翁')


// 子传父-方式1 -运行时的声明
// const emit = defineEmits(['myevent']);
// const emitFn = () => {
//     emit('myevent', { name: '小明', age: 10 })
// }


// 子传父-方式2: 标注类型
// const emit = defineEmits<{
//     (e: 'myevent', value: { name: string, age: number }): void
// }>()
// const emitFn = () => {
//     emit('myevent', { name: '小明', age: 10 })
// }


// 子传父-方式3: 
const emit = defineEmits<{
    myevent: [value: { name: string, age: number }]
}>()
const emitFn = () => {
    emit('myevent', { name: '小明', age: 10 })
}

</script>
<style scoped></style>